<template>
  <view wx:if="{{show}}">
      <!-- 码数  start-->
      <view class="sdd">
          <view>
              <view class="tba_list">
                  <view class="tba_list_wis" wx:for="{{list}}" wx:key="item">
                      <view class="tba_list_wis_mashu {{ thisChooseIndex == item  ? 'org': ''}}" @tap="chooseThisSize" data-size="{{item}}">
                          <view>{{item}}</view>
                      </view>
                  </view>
              </view>
          </view>
          <!-- 全部 start-->
          <view class="tab_button">
              <view @tap="allClose">全部</view>
              <view @tap="close">取消</view>
          </view>
          <!-- 全部 end-->
      </view>
      <!-- 码数 end-->
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class FilterSlider extends wepy.component {
    data = {
      show : false,
        list:[],
        thisChooseIndex : ''
    }
    events = {}
    methods = {
        close(){
            this.show = false;
            this.$emit("sendSize",null,false );
        },
        chooseThisSize(e){
            let size = e.currentTarget.dataset.size;
            this.thisChooseIndex = size;
            this.$emit("sendSize",size,true );
            this.show = false;
        },
        allClose(){
            this.$emit("sendSize",null,true );
            this.thisChooseIndex = '';
            this.show = false;
        },
        priChangeShow(r){
            this.show = r;
        }
    }
    onLoad(){
        const t = this;
        t.list = [];
        for(let i = 30;i<=50; i++){
            t.list.push(i);
        }
        t.$apply();
    }
  }
</script>

<style lang="less">
    .sdd {
        position: absolute;
        top: 60rpx;
        height: 100%;
        width: 100%;
        left: 0;
        z-index: 999;
        background: rgba(51, 51, 51, 0.356);
        .org {
            background: #ffb025 !important;
            view {
                color: #fff !important;
            }
        }
        > view {
            padding: 10rpx 20rpx;
            background: #e6e6e6;
            .tba_list {
                overflow: hidden;
                width: 100%;

                .tba_list_wis {
                    width: 25%;

                    float: left;
                    .tba_list_wis_mashu {
                        background: #fff;
                        margin: 5rpx 5rpx;
                        text-align: center;
                        padding: 5rpx 0;
                        border-radius: 6rpx;
                    }
                }
            }
        }
    }
    //码子选择
    .tab_button {
        background: #e6e6e6;
        display: flex;
        padding: 10rpx 20rpx;
        > view {
            background: #fff;
            padding: 5rpx 33rpx;
            text-align: center;
            border-radius: 6rpx;
        }
        > view:nth-child(2) {
            margin-left: auto;
        }
    }
</style>
